<script setup>
import {ref} from "vue";
import {onHide, onLoad, onPageScroll, onReachBottom, onShow, onUnload} from '@dcloudio/uni-app';
import useZPaging from "z-paging/components/z-paging/js/hooks/useZPaging.js"
import {useUserInfoStore} from "../stores/modules/userInfo";
import {rechargeInfo} from "../services/me";

const paging = ref(null)

let dataList = ref([])
useZPaging(paging)


const messageList = ref([
  {
    "id": 1,
    "user_id": 6,
    "title": "冒大仙火锅冒菜麻辣烫（花果园中心店）",
    "news_content": "900841701343057914订单已完成",
    "status": 0,
    "created_at": "2024-10-18 07:11:35",
    "updated_at": "2024-10-18 07:11:35"
  }, {
    "id": 1,
    "user_id": 6,
    "title": "冒大仙火锅冒菜麻辣烫（花果园中心店）",
    "news_content": "900841701343057914订单已完成",
    "status": 0,
    "created_at": "2024-10-18 07:11:35",
    "updated_at": "2024-10-18 07:11:35"
  }, {
    "id": 1,
    "user_id": 6,
    "title": "冒大仙火锅冒菜麻辣烫（花果园中心店）",
    "news_content": "900841701343057914订单已完成",
    "status": 0,
    "created_at": "2024-10-18 07:11:35",
    "updated_at": "2024-10-18 07:11:35"
  }, {
    "id": 1,
    "user_id": 6,
    "title": "冒大仙火锅冒菜麻辣烫（花果园中心店）",
    "news_content": "900841701343057914订单已完成",
    "status": 0,
    "created_at": "2024-10-18 07:11:35",
    "updated_at": "2024-10-18 07:11:35"
  }, {
    "id": 1,
    "user_id": 6,
    "title": "冒大仙火锅冒菜麻辣烫（花果园中心店）",
    "news_content": "900841701343057914订单已完成",
    "status": 0,
    "created_at": "2024-10-18 07:11:35",
    "updated_at": "2024-10-18 07:11:35"
  }
])
const useUser = useUserInfoStore() // 使用userInfoStore状态管理器
onLoad(() => {
  if (useUser.isLogin()) {

  }
})

onPageScroll(() => {
})
onReachBottom(() => {
})

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {
  rechargeInfo({}).then(res => {
    paging.value.complete(res.result);
  }).catch(() => {
    paging.value.complete(false);
  })
}

const toLogo = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  })
}
</script>

<template>
  <view v-if="!useUser.isLoginBool()">
    <u-navbar
        title="会员充值订单"
        placeholder
        titleStyle="color:black"
        leftIconColor="#000"
        auto-back
    >
    </u-navbar>
    <view
        style="text-align: center;height: 600rpx;display: flex;align-items: center;justify-content: center;color: #999999;font-size: 28rpx"
        @click="toLogo">
      当前用户未登录，请先登录
    </view>
  </view>
  <z-paging ref="paging" v-model="dataList"
            auto-show-back-to-top
            use-page-scroll
            @query="queryList"
            :refresher-complete-delay="600" v-else>
    <template #top>
      <u-navbar
          title="会员充值订单"
          placeholder
          titleStyle="color:black"
          leftIconColor="#000"
          auto-back
      >
      </u-navbar>
    </template>
    <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
    <view v-for="(item,index) in dataList" :key="index">
      <view class="item" @click="toPage(item)">
        <view style="display: flex">
          <image src="https://lsz.lszbg.com/imgs/fuli/vip.png"
                 style="height: 38rpx;width: 38rpx;position: relative;z-index: 100"></image>
          <text class="title" style="font-weight: bold">
            {{ item.name }}
          </text>
          <view style="flex: 1"></view>
          <view style="font-size: 26rpx">
            {{item.is_pay === 1 ? '已完成' : '未支付'}}
          </view>
        </view>
        <view style="height: 1px;background-color: #EEEEEE;margin: 20rpx 0"></view>
        <view style="font-size: 24rpx;color: black;">
          充值金額：<text style="color: #ff5c26;font-size: 26rpx;font-weight: bold">￥{{ item.money }}</text>
        </view>
        <view style="height: 20rpx"></view>
        <view style="font-size: 24rpx;">
          订单号：{{ item.order_no }}
        </view>
        <view style="height: 20rpx"></view>
        <view style="font-size: 24rpx;">
          充值日期：{{ item.pay_time }}
        </view>
        <view style="height: 1px;background-color: #EEEEEE;margin: 20rpx 0"></view>
        <view style="font-size: 22rpx;">
          会员到期时间：{{ item.end_time }}
        </view>
      </view>
    </view>
  </z-paging>
</template>
<style>
page {
  background-color: #f8f8f8;
}
</style>
<style scoped lang="scss">
.item {
  background-color: white;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
}

.title {
  font-size: 28rpx;
  margin-left: 10rpx;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dot {
  height: 13rpx;
  width: 13rpx;
  background-color: #ff5c26;
  border-radius: 30rpx;
  margin-left: 10rpx;
}
</style>